import { Table, Tag } from "antd";

const ApplicationTable = ({ appLoading, applications, cardBodyHeight, page, pageSize }) => {
    const RenderNo = (_, r, i) => {
        if (page && pageSize) {
            return (page - 1) * pageSize + i + 1;
        } else {
            return i + 1;
        }
    };

    const RenderIsFree = (_, r, i) => {
        return _ ? "免费" : "收费";
    };

    const RenderIsOpen = (_, r, i) => {
        return _ ? "公开" : "私有";
    };

    const RenderAiSdpr = (_, r, i) => {
        return r.isFree ? "-" : helper.numberFormat(_, 2);
    };

    const RenderAiStat = (_, r, i) => {
        return (
            <Tag color={stateColor[_]} style={{ margin: 0 }}>
                {_}
            </Tag>
        );
    };

    const columns = [
        { title: "序号", width: 60, align: "center", render: RenderNo },
        { title: "应用名称", dataIndex: "aiName", align: "left" },
        { title: "应用分类", dataIndex: "aiClas", align: "center" },
        { title: "适用对象", dataIndex: "aiObje", align: "center" },
        { title: "所属角色", dataIndex: "aiRole", align: "center" },
        { title: "是否免费", dataIndex: "isFree", align: "center", render: RenderIsFree },
        { title: "是否公开", dataIndex: "isOpen", align: "center", render: RenderIsOpen },
        { title: "结算价格", dataIndex: "aiSdpr", align: "center", width: 120, render: RenderAiSdpr },
        { title: "上架状态", dataIndex: "aiStat", align: "center", width: 100, render: RenderAiStat },
    ];

    return (
        <Table
            loading={appLoading}
            size="small"
            dataSource={applications}
            columns={columns}
            rowKey="aiUuid"
            bordered
            pagination={false}
            scroll={{
                y: cardBodyHeight - 40 - 50,
            }}
        />
    );
};

const stateColor = {
    待上架: "#2db7f5",
    已上架: "#87d068",
    已下架: "#f50",
};

export default ApplicationTable;
